<template>
    <div class="user-box" v-loading="loading">
        <div class="user-top">
            <h1 class="top-title">用户查询</h1>
            <div class="user-input">
                <el-input
                    style="width:60%;"
                    placeholder="请输入内容"
                    prefix-icon="el-icon-search"
                    @keyup.enter.native="searchUserInfo"
                    v-model.trim="userId">
                </el-input>
                <el-button type="primary" style="margin-left:20px;" @click="searchUserInfo">搜 索</el-button>
            </div>
            <span class="user-card">
                <!-- <span>可输入 用户ID、 IDFA号、微信Open ID 来查询。</span> -->
                <span>可输入 用户ID、手机号、用户昵称 来查询。</span>
                <!-- ，同时查询多个结果请用空格隔开 -->
            </span>
        </div>
        <div v-if="showUser">
            <topTitle title="基本信息" style="padding-left:30px;"/>
            <div class="user-msg">
                <div class="user_img">
                    <img :src="detail.userImage" alt="">
                </div>
                <div class="user-info-box">
                    <div class="user-info-item">
                        <div style="flex:1;">
                            <div class="user_title">用户ID</div>
                            <div class="user_msg">{{detail.userId}}</div>
                        </div>
                        <div style="flex:1;">
                            <div class="user_title">用户名</div>
                            <div class="user_msg">{{detail.nickName || '-'}}</div>
                        </div>
                        <div style="flex:1;">
                            <div class="user_title">手机号</div>
                            <div class="user_msg">{{detail.iphone || '-'}}</div>
                        </div>
                        <div style="flex:3;">
                            <div class="user_title">IMEI</div>
                            <!-- <div class="user_msg">{{detail.imei || '-'}}</div> -->
                            <div class="user_msg">{{detail.deviceId || '-'}}</div>
                        </div>
                    </div>
                    <div class="user-info-item">
                        <div style="flex:1">
                            <div class="user_title">用户状态</div>
                            <!-- status -->
                            <div class="user_status_bad" v-if="detail.status === '-1'">封禁</div>
                            <div class="user_status_bad" v-if="detail.status === '-2'">冻结钱包</div>
                            <div class="user_status" v-if="detail.status === '1'">正常</div>
                            <div class="user_status_bad" v-if="detail.status === '0'">不可提现</div>
                        </div>
                        <!-- <div style="flex:1">
                            <div class="user_title">不可提现</div>
                            <div class="user_status_bad" v-if="detail.status === '0'">恶意</div>
                            <div class="user_status" v-else>正常</div>
                        </div> -->
                        <div style="flex:1">
                            <div class="user_title">微信评级</div>
                            <div class="rating">
                                <div>{{detail.wechatRating || '-'}}</div>
                                <template v-if="detail.riskType">
                                    <el-tooltip class="item" effect="dark" placement="top">
                                        <div slot="content" v-html="setContent(detail)"></div>
                                        <i class="el-icon-question"></i>
                                    </el-tooltip>
                                </template>
                            </div>
                        </div>
                        <div style="flex:1">
                            <div class="user_title">频繁访问</div>
                            <div>暂无</div>
                            <!-- moreTimeVisit -->
                            <!-- <div class="user_status">{{detail.days || '-'}}</div> -->
                        </div>
                        <div style="flex:1;">
                            <div class="user_title">注册时间</div>
                            <div class="user_msg">{{detail.date | timeInit}}</div>
                        </div>
                        <div style="flex:2">
                            <div class="user_title">活跃天数</div>
                            <div class="user_msg">{{detail.activeDays || '-'}}</div>
                        </div>
                    </div>
                    <div class="user-info-item">
                        <div style="flex:1;">
                            <div class="user_title">累计金币</div>
                            <div class="user_msg">{{conversion(detail.coinTotal) || '0'}}</div>
                        </div>
                        <div style="flex:1;">
                            <div class="user_title">提现金币</div>
                            <div class="user_msg">{{conversion(detail.withDrawCoin) || '0'}}</div>
                        </div>
                        <div style="flex:1;">
                            <div class="user_title">剩余金币</div>
                            <div class="user_msg">{{conversion(detail.balance) || '0'}}</div>
                        </div>
                        <div style="flex:1;">
                            <div class="user_title">消耗金币</div>
                            <div class="user_msg">{{conversion(detail.appUseCoin) || '0'}}</div>
                        </div>
                        <div style="flex:2;">
                            <div class="user_title">冻结金币(趣友团)</div>
                            <div class="user_msg">{{conversion(detail.inviteNoConfirmCoin) || '0'}}</div>
                        </div>
                        <!-- <div style="flex:1;">
                            <div class="user_title">身份证信息</div>
                            <div class="user_msg">{{detail.idcardInfo || '-'}}</div>
                        </div> -->
                    </div>
                    <div class="user-info-item">
                        <div style="flex:1;">
                            <div class="user_title">直邀好友</div>
                            <div class="user_msg">{{conversion(detail.inviteUserNum) || '0'}}位</div>
                        </div>
                        <div style="flex:1;">
                            <div class="user_title">直接邀请奖励</div>
                            <div class="user_msg">{{conversion(detail.directInviteReward) || '0'}}金币</div>
                        </div>
                        <div style="flex:1;">
                            <div class="user_title">扩散好友</div>
                            <div class="user_msg">{{conversion(detail.spreadUserNum) || '0'}}位</div>
                        </div>
                        <div style="flex:1;">
                            <div class="user_title">扩散邀请奖励</div>
                            <div class="user_msg">{{conversion(detail.spreadInviteReward) || '0'}}金币</div>
                        </div>
                        <div style="flex:1;">
                            <div class="user_title">启动趣游戏次数</div>
                            <div class="user_msg">{{detail.startCount || '0'}}次</div>
                        </div>
                        <div style="flex:1;">
                            <div class="user_title">启动游戏次数</div>
                            <div class="user_msg">{{detail.startGameCount || '0'}}次</div>
                        </div>
                    </div>
                    <div class="user-info-item">
                        <div style="flex:1;">
                            <div class="user_title">参与抽奖次数</div>
                            <div class="user_msg">{{ conversion(detail.totalActivityTime) || '0' }}次</div>
                        </div>
                        <div style="flex:1;">
                            <div class="user_title">剩余抽奖次数</div>
                            <div class="user_msg">{{ conversion(detail.totalActivityTime - detail.activityCount) }}次</div>
                        </div>
                        <div style="flex:1;">
                            <div class="user_title">自定义启动器</div>
                            <div class="user_msg">{{ detail.startOwnEditor > 0 ? '有' : '-' }}</div>
                        </div>
                        <div style="flex:1">
                            <div class="user_title">已充值</div>
                            <div class="user_msg">{{ conversion(detail.rechargeDiamond) || '0' }}趣宝石</div>
                        </div>
                        <div style="flex:1;">
                            <div class="user_title">已消费</div>
                            <div class="user_msg">{{conversion(detail.consumDiamond) || '0'}}趣宝石</div>
                        </div>
                        <div style="flex:1;">
                            <div class="user_title">托管账号数</div>
                            <div class="user_msg">{{detail.escrowAccountCount || '0'}}个</div>
                        </div>
                    </div>
                    <div class="user-info-item" v-if="detail.userDeviceVo">
                        <div style="flex:1;">
                            <div class="user_title">IP号</div>
                            <div class="user_msg">{{ detail.userDeviceVo.ip || '-' }}</div>
                        </div>
                        <div style="flex:1;" v-if="detail.userDeviceVo.ipAddress">
                            <div class="user_title">IP所在地</div>
                            <div class="user_msg">{{ detail.userDeviceVo.ipAddress.city || '-' }}</div>
                        </div>
                        <div style="flex:1;">
                            <div class="user_title">设备</div>
                            <div class="user_msg">{{ detail.userDeviceVo.platform || '-' }}</div>
                        </div>
                        <div style="flex:1;">
                            <div class="user_title">是否开启权限信息</div>
                            <div class="user_msg">{{ detail.openAuth ? '已开启' : '未开启' }}</div>
                        </div>
                        <div style="flex:2;"></div>
                    </div>
                    <div class="user-info-item">
                        <div style="flex:1;">
                            <div class="user_title">号主违规次数</div>
                            <div class="user_msg">{{ detail.accountPunishCount || '0' }}次</div>
                        </div>
                        <div style="flex:1;">
                            <div class="user_title">玩家违规次数</div>
                            <div class="user_msg">{{ detail.userPunishCount || '0' }}次</div>
                        </div>
                        <div style="flex:4;"></div>
                    </div>
                </div>
                <div class="user_btn">
                    <!-- <div v-if="detail.identify !== 0">
                        <div v-if="detail.identify === 2"><el-button size="small" style="width:100%;" type="info" @click="updateIdentifys(1)">解除视频合作方</el-button></div>
                        <div v-else><el-button size="small" style="width:100%;" type="success" @click="updateIdentifys(2)">设为视频合作方</el-button></div>
                    </div> -->
                    <div v-if="detail.status !== '1'">
                        <div><el-button size="small" style="width:100%;" type="info" @click="updateStatus('1')">设为正常用户</el-button></div>
                    </div>
                    <!-- <div v-if="detail.status !== '0'">
                        <div><el-button size="small" style="width:100%;" type="warning" @click="updateStatus('0')">不可提现</el-button></div>
                    </div> -->
                    <div v-if="detail.status !== '-2'">
                        <div style="position: relative;">
                            <el-button size="small" style="width:100%;" type="primary" @click="updateStatus('-2')">冻结钱包</el-button>
                            <template>
                                <el-tooltip style="position: absolute; top: -5px; right: -16px; color: #c6c6c6; cursor:pointer;" class="item" effect="dark" placement="top">
                                    <div slot="content">金币和趣宝石不可消费、不可充值，仍可登录app</div>
                                    <i class="el-icon-question"></i>
                                </el-tooltip>
                            </template>
                        </div>
                    </div>
                    <div v-if="detail.status !== '-1'">
                        <div style="margin-top:10px;position: relative;">
                            <el-button size="small" style="width:100%;" type="danger" @click="updateStatus('-1')">封 禁</el-button>
                            <template>
                                <el-tooltip style="position: absolute; top: -5px; right: -16px; color: #c6c6c6; cursor:pointer;" class="item" effect="dark" placement="top">
                                    <div slot="content">账号禁止使用app</div>
                                    <i class="el-icon-question"></i>
                                </el-tooltip>
                            </template>
                        </div>
                    </div>
                </div>
            </div>

            <div class="user-tabs">
                <el-tabs :value="userTabValue">
                    <el-tab-pane label="绑定信息" name="first" :lazy="true">
                        <bindInfo :detail="detail"/>
                    </el-tab-pane>
                    <el-tab-pane :label="`租号订单「${detail.orderCount}」`" name="rentTeam" :lazy="true">
                        <rentList :userId="detail.userId"/>
                    </el-tab-pane>
                    <el-tab-pane :label="`出租订单「${detail.accountOrderCount}」`" name="tuoguanTeam" :lazy="true">
                        <tuoguanList :userId="detail.userId"/>
                    </el-tab-pane>
                    <!-- <el-tab-pane :label="`卖号订单「${detail.orderCount}」`" name="rentTeam" :lazy="true">
                        <rentList :userId="detail.userId"/>
                    </el-tab-pane>
                    <el-tab-pane :label="`买号订单「${detail.accountOrderCount}」`" name="tuoguanTeam" :lazy="true">
                        <tuoguanList :userId="detail.userId"/>
                    </el-tab-pane> -->
                    <!-- <el-tab-pane label="发布视频" :lazy="true">
                        <videoBox :detail="detail"/>
                    </el-tab-pane>
                    <el-tab-pane label="发布点评" :lazy="true">
                        <talkBox :detail="detail"/>
                    </el-tab-pane>
                    <el-tab-pane label="发布回复" :lazy="true">
                        <talkBackBox :detail="detail"/>
                    </el-tab-pane> -->
                    <el-tab-pane label="游戏记录" :lazy="true">
                        <gameBox :detail="detail"/>
                    </el-tab-pane>
                    <el-tab-pane label="提现记录" :lazy="true">
                        <moneyBox :detail="detail"/>
                    </el-tab-pane>
                    <el-tab-pane label="奖励明细" :lazy="true">
                        <goldBox :detail="detail"/>
                    </el-tab-pane>
                    <el-tab-pane label="抽奖记录" :lazy="true">
                        <lottery :detail="detail"/>
                    </el-tab-pane>
                    <el-tab-pane label="邀请记录" :lazy="true">
                        <inviteBox :detail="detail"/>
                    </el-tab-pane>
                    <el-tab-pane label="托管账号" :lazy="true">
                        <account :detail="detail"/>
                    </el-tab-pane>
                    <el-tab-pane label="组队信息" name="quTeam" :lazy="true">
                        <quTeamBox :detail="detail"/>
                    </el-tab-pane>
                    <el-tab-pane label="趣宝石明细" name="gemDetail" :lazy="true">
                        <gemDetail :detail="detail"/>
                    </el-tab-pane>
                    <el-tab-pane label="支付明细" name="payDetail" :lazy="true">
                        <payDetail :detail="detail"/>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
        <el-dialog :title="placeholderTxt" :visible.sync="banned" width="400px">
            <div style="padding: 10px 0 20px;">
                <el-input v-model="remark" type="textarea"></el-input>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="banned = false">取 消</el-button>
                <el-button type="primary" @click="getUpdateStatus">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import bindInfo from './bindInfo'
import videoBox from './video'
import talkBox from './talk'
import talkBackBox from './talkBack'
import gameBox from './game'
import moneyBox from './money'
import goldBox from './gold'
import lottery from './lottery'
import inviteBox from './invite'
import account from './account'
import quTeamBox from './quTeam'
import gemDetail from './gemDetail'
import payDetail from './payDetail'
import tuoguanList from '@/views/quDeal/orderManage/tuoguanList.vue'
import rentList from '@/views/quDeal/orderManage/rentList.vue'
import { formatDate, conversion } from '@/utils/utils'
export default {
    data () {
        return {
            banned: false,
            remark: '',
            status: 1,
            userId: '',
            userTabValue: 'first',
            showUser: false,
            loading: false,
            detail: {},
            risk: {
                1: '账号近期存在因恶意被处罚历史，网络低活跃，被举报等因素',
                2: '疑似批量注册小号，近期存在严重违规或大量举报',
                3: '送检账号参数无法成功解析，请检查微信 OpenID 是否有误',
                4: '该账号在业务侧有过拉黑记录',
                5: '业务自行有添加过白名单记录',
                101: '存在 IP/设备/环境等因素的聚集性异常',
                102: '疑似自动机批量请求',
                104: '检查 wxtoken 参数，是否已经失效',
                201: '操作 IP/设备/环境存在异常。当前 IP 为非常用 IP 或恶意 IP 段',
                205: '传进来的 IP 地址为内网 IP 地址或者 IP 保留地址',
                206: '该设备存在异常的使用行为'
            },
            placeholderTxt: ''
        }
    },

    activated () {
        if (this.$route.query.id) {
            this.userId = this.$route.query.id
            this.searchUserInfo()
        }
        if (this.$route.query.tab === 'quTeam') {
            this.userTabValue = 'quTeam'
        }
    },

    methods: {
        // 查询用户信息
        async searchUserInfo () {
            if (!this.userId) {
                this.$message({
                    type: 'error',
                    message: '请输入查询条件后查询~'
                })
                return
            }
            if (this.loading) return
            this.showUser = false
            this.loading = true
            let res = await this.$http.get('/user/getUserInfo', {
                params: {
                    userId: this.userId
                }
            })
            if (res.code === '0') {
                this.detail = res.data
                this.showUser = true
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
            this.loading = false
        },

        // 设为视频合作方
        async updateIdentifys (status) {
            if (this.loading) return
            this.loading = true
            let res = await this.$http.get('/user/updateIdentifys', {
                params: {
                    userId: this.detail.userId,
                    status
                }
            })
            if (res.code === '0') {
                this.detail.identify = status
                this.$message({
                    type: 'success',
                    message: '设置成功'
                })
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
            this.loading = false
        },

        // 封禁（解封）用户
        updateStatus (status) {
            // 设置正常用户不需要弹框
            if (status === '1') {
                this.status = status
                this.placeholderTxt = ''
                this.getUpdateStatus()
                return
            }
            this.banned = true
            this.status = status
            let obj = {
                '0': '请输入不可提现原因',
                '1': '请输入设为正常用户原因',
                '-1': '请输入封禁原因',
                '-2': '请输入冻结钱包原因'
            }
            this.placeholderTxt = obj[status]
        },

        async getUpdateStatus () {
            if (this.loading) return
            this.loading = true
            let res = await this.$http.get('/user/updateStatus', {
                params: {
                    userId: this.detail.userId,
                    status: this.status,
                    message: this.remark
                }
            })
            if (res.code === '0') {
                // 用户状态 -1封禁  0不可提现   1正常用户 -2资金冻结
                this.detail.status = this.status
                this.banned = false
                this.$message({
                    type: 'success',
                    message: '设置成功'
                })
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
            this.remark = ''
            this.loading = false
        },

        // 数字转换
        conversion (val) {
            return conversion(val)
        },

        // 微信评级说明
        setContent (detail) {
            let content = ''
            if (detail.riskType.indexOf('[') > -1) {
                const riskType = JSON.parse(detail.riskType)
                riskType.forEach(item => {
                    content += `<p style="padding: 3px 0;">${item}: ${this.risk[item]};</p>`
                })
            }
            return content
        }
    },

    filters: {
        timeInit (val) {
            if (val) {
                return formatDate(val, 'YYYY-MM-DD HH:MM:SS')
            } else {
                return '-'
            }
        }
    },

    beforeRouteLeave (to, from, next) {
        delete from.meta.parent
        console.log(from)
        next()
    },

    components: {
        bindInfo,
        videoBox,
        talkBox,
        talkBackBox,
        gameBox,
        moneyBox,
        goldBox,
        inviteBox,
        lottery,
        account,
        quTeamBox,
        gemDetail,
        payDetail,
        tuoguanList,
        rentList
    }
}
</script>

<style lang="scss" scoped>
    .user-box {
        margin: 22px auto 0;
        padding-bottom: 40px;
        border-radius: 4px;
        border: solid 1px #dfdfdf;
        background-color: #ffffff;
        .user-top {
            .top-title {
                padding: 31px 0 20px 30px;
                font-size: 24px;
                font-weight: 500;
                color: #363636;
            }
            .user-input {
                padding-left: 30px;
            }
            .user-card {
                position: relative;
                display: inline-block;
                border-radius: 4px;
                border: solid 1px #00ba45;
                background-color: #eefff4;
                font-size: 12px;
                font-weight: 500;
                color: #999eae;
                margin: 18px 0 20px 30px;
                padding: 5px 29px;
                &:before {
                    content: '';
                    position: absolute;
                    top: -7px;
                    left: 35px;
                    width: 0;
                    height: 0;
                    border-left: 7px solid transparent;
                    border-right: 7px solid transparent;
                    border-bottom: 7px solid #00ba45;
                }
                &:after {
                    content: '';
                    position: absolute;
                    top: -5px;
                    left: 35px;
                    width: 0;
                    height: 0;
                    border-left: 7px solid transparent;
                    border-right: 7px solid transparent;
                    border-bottom: 7px solid #eefff4;
                }
            }
        }

        .user-msg {
            display: flex;
            align-items: center;
            padding: 20px;
            border-radius: 4px;
            border: solid 1px #ededed;
            background-color: #fdfdfd;
            margin: 0 30px;
            .user_img {
                width: 92px;
                height: 92px;
                overflow: hidden;
                border-radius: 50px;
                background-color: #ccc;
                img {
                    width: 92px;
                    height: 92px;
                }
            }
            .user-info-box {
                flex: 1;
                margin: 0 20px;
                .user-info-item {
                    display: flex;
                    margin-bottom: 10px;
                    &:last-child {
                        margin: 0;
                    }
                    .rating {
                        display: flex;
                        align-items: center;
                        i{
                            cursor: pointer;
                            color: #c6c6c6;
                            margin-left: 5px;
                        }
                    }
                    .user_msg {
                        font-size: 14px;
                        font-weight: 500;
                        color: #393939;
                    }
                    .user_status {
                        font-size: 14px;
                        font-weight: 600;
                        color: #00ba45;
                    }
                    .user_status_bad {
                        font-size: 14px;
                        font-weight: 600;
                        color: red;
                    }
                    .user_title {
                        font-size: 12px;
                        font-weight: 600;
                        color: #9ba0b1;
                        margin-bottom: 6px;
                    }
                }
            }
            .user_btn {
                > div {
                    margin-top: 10px;
                }
                // div {
                //     width: 92px;
                //     height: 32px;
                //     border-radius: 4px;
                //     background-color: #0081ff;
                //     display: flex;
                //     justify-content: center;
                //     align-items: center;
                //     font-size: 12px;
                //     font-weight: 500;
                //     color: #ffffff;
                //     cursor: pointer;
                // }
                // .user_btn_center {
                //     margin: 10px 0;
                // }
            }
        }

        .user-tabs {
            padding: 20px 30px 0;
        }
    }
</style>
